<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="width: 50%">
      <p style="color: #ff2222">注：页面拉取到最下方有保存按钮，新增或修改后需要点击保存才算操作成功！</p>
      <el-form-item label="内容(中文)">
        <editor v-model="form.zhRichText" :min-height="400"/>
      </el-form-item>
      <el-form-item label="内容(英文)">
        <editor v-model="form.enRichText" :min-height="400"/>
      </el-form-item>
      <el-form-item label="内容(日文)">
        <editor v-model="form.jaRichText" :min-height="400"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer footer-custom">
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>
<script>
import { getInfo,add,edit } from "@/api/triones/richContent";
export default {
  name: "index",
  data() {
    return {
      form: {},
      rules: {}
    }
  },
  created() {
    this.reset();
    this.detail();
  },
  methods: {
    detail() {
      getInfo('about_ubpay').then(response => {
        if (response.data) {
          this.form = response.data;
        }
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.detail();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.detail();
            });
          }
        }
      });
    },
    reset() {
      this.form = {
        id: undefined,
        zhRichText: undefined,
        enRichText: undefined,
        jaRichText: undefined,
        type: 'about_ubpay'
      }
    }
  }
}
</script>
<style scoped lang="scss">
.footer-custom {
  padding-left: 20%;
  padding-bottom: 50px;
}
</style>
